<template>
  <view class="change-image-container">
    <image class="def-img" :src="src" :lazy-load="LazyLoad" @error="handleErr" v-if="!err"></image>
    <image class="err-img" :src="errSrc" mode="cover" v-else></image>
  </view>
</template>

<script>
  export default {
    name: "change-image",
    props: {
      src: {
        default: "",
        type: String
      },
      "LazyLoad": {
        default: false,
        type: Boolean
      },
      mode: {
        default: "scaleToFill",
        type: String
      }
    },
    computed: {
      srcValue() {
        return this.err ? this.errSrc : this.src
      }
    },
    data() {
      return {
        err: false,
        errSrc: "/static/pic_empty.png"
      };
    },
    mounted() {
      this.err = false;
    },
    methods: {
      handleErr() {
        console.log("err")
        this.err = true;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .change-image-container {
    width: 100%;
    height: 100%;

    .def-img {
      width: 100%;
      height: 100%;
    }

    .err-img {
      width: 100%;
      height: 100%;
    }
  }
</style>